<template>
  <BasicModal :show="show" title="新增培训评价" width="30%" :widthComfirm="true" @comfirm="comfirm">
    <template #content>
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '100px', textAlign: 'right' } }">
        <a-form-item label="培训评价" name="comment">
          <a-textarea v-model:value="form.comment" :autoSize="{ minRows: 4, maxRows: 4 }" />
        </a-form-item>
      </a-form>
    </template>
  </BasicModal>
</template>

<script setup lang='ts'>
import { ref } from "vue"
import type { Rule } from 'ant-design-vue/es/form';
import BasicModal from "./BasicModal.vue";
const show = ref<boolean>(false);
const form = ref({
  comment: ""
})
const rules: Record<string, Rule[]> = {
  comment: [{ required: true, message: '请填写培训评价', trigger: 'change' }],
};


const formRef = ref<any>(null)

const comfirm = async () => {
  const res = await formRef.value.validate();
  if (!res) return;
  formRef.value.resetFields();
}
defineExpose({ show })
</script>

<style lang="less" scoped>
.progress {
  display: flex;
  justify-content: end;
  margin: 24px 0;
  padding-top: 24px;
  ;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  .desc {

    font-weight: 400;
    font-size: 14px;
    color: #209EE4;

  }
}
</style>